<template>
    <div class="show">
        <!-- 依据案例欢迎界面和答题界面布局是相同的所以引入到同一个组件里面 -->
        <header class="head">
            <h3 class="head-hometips" v-if="connectComponent == 'home'">欢迎来到专项训练</h3>
            <h3 class="head-questiontips" v-if="connectComponent == 'question'">题目{{ itemNum }}</h3>
        </header>

        <div class="content">
            <!-- 首页内容 -->
            <h4 class="content-hint" v-if="connectComponent == 'home'">认真审题加油完成哦</h4>
            <!-- 题目界面内容 -->
            <div class="content-topic" v-if="connectComponent == 'question'">
                <div class="content-topic-question">
                    {{ problems[itemNum-1].item }}<v-text v-if="problems[itemNum-1].type === 1">(单选题)</v-text><v-text v-if="problems[itemNum-1].type === 2">(多选题)</v-text>
                </div>
                <div class="content-topic-answer">
                    <ul v-if="problems[itemNum-1].type === 1">
                        <li v-for="(item, index) in problems[itemNum-1].answer" v-bind:key="index" style="margin-bottom: 4px"  @click="choosed(item.optionNumber, index)">
                            <span :class="{'beenchoosed':choosedId == index}">{{ chooseType(index) }}. </span>
                            <span :class="{'beenchoosed':choosedId == index}">{{ item.describe }}</span>
                        </li>       
                    </ul>
                    <ul v-if="problems[itemNum-1].type === 2">
                        <li v-for="(item, index) in problems[itemNum-1].answer" v-bind:key="index" style="margin-bottom: 4px"  @click="moreChoosed(item.optionNumber, index)">
                            <span :class="{'beenchoosed':moreChoose[index] == true}">{{ chooseType(index) }}. </span>
                            <span :class="{'beenchoosed':moreChoose[index] == true}">{{ item.describe }}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 结算界面内容 -->
            <div class="content-score" v-if="connectComponent == 'score'">总分为:{{ totleScore }}</div>
        </div>

        <footer class="foot">
            <div class="foot-home" style="border: 4px solid black; border-radius: 4px;" v-if="connectComponent == 'home'">
                <!-- 首页按钮点击路由到题目界面 -->
                <router-link to="question" class="" style="font-weight:400; color: black">开始做题</router-link>
            </div>
            
            <div class="foot-questiontips" style="border: 4px solid black; border-radius: 4px;" v-if="connectComponent == 'question'">
                <!-- 这边判定一下到最后一题的时候显示 -->
                <span style="font-weight: 400;color: black" @click="submitChoose" v-if="itemNum < problems.length">下一题</span>
                <span style="font-weight: 400;color: black" v-else @click="submitAnswer">交 卷</span>
            </div>
        </footer>
    </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
    name: 'show',
    props: [
        'connectComponent'
    ],
    created() {
        // 页面在首页的时候初始化一下所有的值
        if(this.fatherComponent == 'home') {
            this.initializeData();
        }
    },
    computed: mapState([
        'itemNum',
        'result',
        'problems',
        'totleScore'
    ]),
    data() {
        return {
            choosedId: null,
            optionNumber: null, // 用于存所选答案索引
            moreChoose: [false,false,false,false,false], // 多选状态存储
            scoreTo: 0 // 多选分数存储
        }
    },
    methods: {
        ...mapActions([
            'addNum', 'initializeData', 'countScore'
        ]),
        // 序号
        chooseType: type => {
            switch(type){
                case 0: return 'A';
                case 1: return 'B';
                case 2: return 'C';
                case 3: return 'D';
                case 4: return 'F';
            }
        },
        // 单选
        choosed(optionNumber, type) {
            this.optionNumber = optionNumber;
            this.choosedId = type;
        },
        // 多选
        moreChoosed(scoreNumber, index) {
            this.$set(this.moreChoose, index, !this.moreChoose[index]);
            if (this.moreChoose[index]) {
                this.scoreTo = this.scoreTo + scoreNumber
            } else {
                this.scoreTo = this.scoreTo - scoreNumber
            }
            this.optionNumber = this.scoreTo
        },
        // 下一题
        submitChoose() {
            // 当点击下一题时我们提交当前所选答案值
            if(this.optionNumber != null) {
                //保存答案, 题目索引加一，跳到下一题
                this.addNum(this.optionNumber);
                this.optionNumber = null;
                this.choosedId = null;
                this.moreChoose = [false,false,false,false,false];
                this.scoreTo = 0;
            } else {
                alert('还未选择答案');
            }
        },
        // 交卷
        submitAnswer() {
            if(this.optionNumber != null) {
                // 交卷按钮任然要保存最后一个题答案，并且路由到结算页面
                this.addNum(this.optionNumber);
                this.choosedId = null;
                this.scoreTo = 0;
                this.moreChoose = [false,false,false,false,false];
                this.countScore();
                this.$router.push('score');
            }
        },
    }
}
</script>
<style lang="less" scoped>
    .show {
        position: relative;
    }
    .head {
        position: absolute;
        left: 60px;
        top: 60px;
        &-hometips {
            font-weight: 800;
        }
    }
    .content {
        position: absolute;
        left: 60px;
        top: 100px;
        &-hint {
            font-weight: 400;
        }
        &-topic {
            &-question {
                margin-bottom: 10px;
            }
        }
    }
    .foot {
        position: absolute;
        left: 140px;
        top: 625px;
    }
    .beenchoosed {
        color: orange;
    }
</style>